<template>
  <div>
    <el-row style="margin-top: 15px;" v-for="(item,index) in tableData" :key="index">
      <el-col :span="4" style="line-height: 100px;padding-left: 15px;">{{item.title}}</el-col>
      <el-col :span="20">
        <el-table :data="item.dataList" :show-header="false" style="width: 100%;" height="100" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
          <template slot="empty">
            <p>无</p>
          </template>
          <el-table-column prop="id" align="center" label="序号" min-width="10%">
          </el-table-column>
          <el-table-column prop="name" :show-overflow-tooltip="true" align="center" label="公告名称" min-width="20%">
          </el-table-column>
          <el-table-column prop="pic" :show-overflow-tooltip="true" align="center" label="公告图片" min-width="20%">
            <template slot-scope="scope">
              <img :src="scope.row.pic" width="64" height="64">
            </template>
          </el-table-column>
          <el-table-column prop="templateType" :formatter="formatterTemplate" :show-overflow-tooltip="true" align="center" label="公告模板" min-width="10%">
          </el-table-column>
          <el-table-column prop="status" :formatter="formatterStatus" :show-overflow-tooltip="true" align="center" label="状态" min-width="10%">
          </el-table-column>
          <el-table-column align="center" label="操作" min-width="20%">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="cancelPush(scope.row)">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: "liveControllerNoticePushScreen",
    components: {
    },
    props:{
      data:{
        type: Object,
        default:()=>{}
      }
    },
    data() {
      return {
        headerCellStyle:{
          'background-color': '#f1f1f1',
          'font-size':'12px',
          'color':'#000000'
        },
        cellStyle:{
          'font-size':'12px',
          'border-bottom':'0'
        },
        dataList:[],
        tableData:[
          {
            title:'左侧公告',
            dataList:[]
          },
          {
            title:'右侧公告',
            dataList:[]
          },
          {
            title:'顶部公告',
            dataList:[]
          }
        ],
      }
    },
    mounted: function () {
      this.parentData = this.data
      this.getData()
    },
    methods: {
      getData(){
        this.utils.request.liveRequest({
          url: '/api/v1/broadcast/liveNotice/push/'+this.parentData.id,
          method: 'get'
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this.dataList = data.data;
            this.tableData[0].dataList = []
            this.tableData[1].dataList = []
            this.tableData[2].dataList = []
            this.dataList.forEach((item,index)=>{
              if(item.templateType===0){
                this.tableData[0].dataList.push(item)
              } else if(item.templateType===1){
                this.tableData[1].dataList.push(item)
              } else if(item.templateType===2){
                this.tableData[2].dataList.push(item)
              }
            })
          }
        })
      },
      pushScreen(row){
        this.getData()
      },
      formatterTemplate(row, column, cellValue, index){
        if(cellValue == 0){
          return "左侧模板"
        } else if(cellValue == 1){
          return "右侧模板"
        } else if(cellValue == 2){
          return "顶部模板"
        }
      },
      formatterStatus(row, column, cellValue, index){
        if(cellValue == 36){
          return "未展示"
        } else if(cellValue == 37){
          return "展示中"
        }
      },
      cancelPush(row){ // 取消推屏
        this.$emit("pushScreenHandle",row)
      },
    }
  }
</script>
<style scoped lang="scss">

</style>
